<template>
    <div class="xiaoPeng" style="overflow: hidden">
        <header class="top">
            <section class="part_one">
                <span>全系车系</span>
                <span>智能科技</span>
            </section>
            <div>
                <img :src="backgroundImageUrl" alt="">
            </div>
        </header>
        <Main style="overflow: scroll;height: 1000px">
            <section
                    v-for="(item,index) in topBarState"
                    :key="item.id"
                    :ref="(el)=>(index === topBarState.length-1 ? (itemRef = el as HTMLElement) : '')"
            >
                <img :src="item.imageUrl " alt="">
            </section>
            <div v-if="!hasMore">
                <div style="bottom: 5px;position: absolute">没有更多汽车图片啦！！</div>
            </div>
        </Main>
        <footer>
        </footer>
        <Bottom class="bottom"/>
    </div>
</template>
<script lang="ts" setup>
import {useCiaoPenPageStore} from "@/stores/xiaoPengPageStore.ts";
import {onMounted, ref, toRefs} from "vue";
import Bottom from "@/components/Bottom/Bottom.vue";
import {useIntersectionObserver} from "@/hooks/useIntersectionObserver"

const itemRef = ref<HTMLElement | null>(null);
const CiaoPenPageStore = useCiaoPenPageStore()
const {topBarState, _topBarState} = toRefs(CiaoPenPageStore)
const backgroundImageUrl = ref()
const currentPage = ref<number>(1);
let hasMore = ref<boolean>(true);
onMounted(async () => {
    await CiaoPenPageStore.getTopBarState(1)
})
// 处理加载下一页
const handleNextPage = async (setHasMore: (value: boolean) => void) => {
    currentPage.value++;
    const res = await CiaoPenPageStore.getTopBarState(currentPage.value);
    if (!res.hasMore) {
        setHasMore(false);
        hasMore.value = false;
    }
}
const {setHasMore} = useIntersectionObserver(itemRef, () => {
    handleNextPage(setHasMore);
})
for (let index of _topBarState.value) {
    backgroundImageUrl.value = index.imageUrl
}
</script>
<style scoped lang="scss">
.top {
    margin-top: 20px;
    img {
        top: 10px;
        width: 100%;
        height: 200px;
        /*top: 10px;*/
        z-index: -200;
        position: absolute;
    }
}
.part_one {
    font-size: 15px;
    display: flex;
    justify-content: space-evenly;
    color: red;
    width: 300px;
    height: 200px;
}
img {
    width: 100%;
    height: 200px;
    /*top: 10px;*/
    /*z-index: -200;*/
    /*position: absolute;*/
}
.bottom {
    position: fixed;
    bottom: 0;
    /*z-index: 9999;*/
}
</style>
